<template>
  <div class="phone-viewport complete-example">
    <md-whiteframe md-tag="md-toolbar" md-elevation="2" class="md-small">
      <div class="md-toolbar-container">
        <md-button class="md-icon-button" @click.native="$refs.sidenav.toggle()">
          <md-icon>menu</md-icon>
        </md-button>
        <h2 v-show="!search.searchEnabled" class="md-title">{{pTitle}}</h2>
        <span v-show="!search.searchEnabled" style="flex: 1"></span>
        <md-input-container v-show="search.searchEnabled&&(currentPath === 'homelist')" style="flex: 1" md-inline>
          <md-icon @click.native="TOOGLE_ADVANCESEARCH">add</md-icon>
          <label>搜索</label>
          <md-input v-model = "searchQuery"></md-input>
       </md-input-container>
        <md-button v-show="(currentPath === 'homelist')"  @click.native="TOOGLE_SEARCH" class="md-icon-button">
           <md-icon v-show="!search.searchEnabled">search</md-icon>
           <md-icon v-show="search.searchEnabled">cancel</md-icon>
        </md-button>
        <md-button class="md-icon-button">
          <md-icon>view_module</md-icon>
        </md-button>
      </div>
    </md-whiteframe>
    <advance-search v-show="search.advanceSearchEnabled&&search.searchEnabled"></advance-search>
    <router-view></router-view>
    <md-sidenav class="md-left" ref="sidenav">
      <md-toolbar class="md-account-header">
        <md-list class="md-transparent">
          <md-list-item class="md-avatar-list">
            <md-avatar :class="{'md-large': true, 'md-accent': true, 'md-avatar-icon': common.userInfo.avatar === null}">
              <img v-if="!(common.userInfo.avatar === null)" :src="`${avatarPrefix}/${common.userInfo.avatar}`" alt="People">
              <md-icon v-if="common.userInfo.avatar === null">mood</md-icon>
            </md-avatar>
          </md-list-item>
          <md-list-item>
            <div v-show="!(common.userInfo.username === null)" class="md-list-text-container">
              <span>{{common.userInfo.username}}</span>
            </div>
            <md-button href="#/login" v-show="common.userInfo.username === null" style="flex:1" class="md-raised md-accent">登录</md-button>
            <md-button href="#/register" v-show="common.userInfo.username === null" style="flex:1" class="md-raised md-accent">注册</md-button>
          </md-list-item>
        </md-list>
      </md-toolbar>
      <md-list>
        <md-list-item href="#/home/list" @click.native="$refs.sidenav.toggle()" :class="{'md-primary': currentPath === 'homelist'}">
          <md-icon>home</md-icon> <span>主页</span>
        </md-list-item>
        <md-list-item href="#/home/whatshot" @click.native="$refs.sidenav.toggle()" :class="{'md-primary': currentPath === 'whatshot'}">
          <md-icon>whatshot</md-icon> <span>热门</span>
        </md-list-item>
        <md-list-item @click.native="$refs.sidenav.toggle()">
          <md-icon>favorite</md-icon> <span>收藏(摸了)</span>
        </md-list-item>
        <md-list-item href="#/history" @click.native="$refs.sidenav.toggle()">
          <md-icon>history</md-icon> <span>历史</span>
        </md-list-item>
        <md-list-item href="#/chatroom" @click.native="$refs.sidenav.toggle()">
          <md-icon>sms</md-icon> <span>聊天室</span>
        </md-list-item>
        <md-list-item @click.native="$refs.sidenav.toggle()">
          <md-icon>room</md-icon> <span>附近的绅士</span>
        </md-list-item>
      </md-list>
      <div class="toggles">
        <div class="toggle">
          <md-switch :value="common.isEX" @change="toogleEX()" name="isEX" class="md-primary">EX源</md-switch>
        </div>
        <md-button @click.native="logOut" v-if="!(common.userInfo.username === null)" class="md-raised md-accent log-out"><md-icon>exit_to_app</md-icon>注销</md-button>
      </div>
    </md-sidenav>
    <md-button @click.native="initHomeList(0);TOOGLE_SEARCH()" v-show="search.searchEnabled" class="md-fab md-primary md-fab-bottom-right">
      <md-icon>search</md-icon>
    </md-button>
    <md-speed-dial v-show="!search.searchEnabled" :class="dialClass" md-mode="scale" class="md-fab-bottom-right">
      <md-button class="md-fab" md-fab-trigger>
        <md-icon  md-icon-morph>close</md-icon>
        <md-icon>add</md-icon>
      </md-button>
      <md-button @click.native="refreshList()" class="md-fab md-mini md-clean">
        <md-icon>refresh</md-icon>
      </md-button>
      <md-button id="jump" v-show="!(currentPath === 'whatshot')" @click.native="openDialog" class="md-fab md-mini md-clean">
        <md-icon>content_copy</md-icon>
      </md-button>
    </md-speed-dial>
    <md-dialog md-open-from="#jump" md-close-to="#jump" ref="dialog">
      <md-dialog-title>跳页</md-dialog-title>
      <md-dialog-content>
        <md-input-container>
          <label>第{{homeList.page + 1}}页,共{{homeList.pageNumber - 1}}页</label>
          <md-input v-model="pageNo" type="number"></md-input>
        </md-input-container>
      </md-dialog-content>
      <md-dialog-actions>
        <md-button class="md-primary" @click.native="jumpTo">我TM社保！</md-button>
      </md-dialog-actions>
    </md-dialog>
  </div>
</template>

<script>
import {mapActions, mapState, mapMutations} from 'vuex'
export default {
  data () {
    return {
      dialClass: '',
      pageNo: ''
    }
  },
  components: {
    homeList: require('./../../components/common/homeList'),
    advanceSearch: require('./children/advanceSearch')
  },
  computed: {
    ...mapState([
      'homeList',
      'common'
    ]),
    search () {
      return this.common.search
    },
    searchQuery: {
      get () {
        return this.common.search.searchParams.basicSearch.f_search
      },
      set (value) {
        return this.SET_SEARCHPARAMS({name: 'f_search', value})
      }
    },
    avatarPrefix () {
      return process.env.NODE_ENV === 'development' ? 'ehmaster' : 'http://nb.tmallup.cn/ehentai-master/static'
    },
    currentPath () {
      return this.$route.name
    },
    pTitle () {
      if (this.currentPath === 'homelist') {
        return '主页'
      } else if (this.currentPath === 'whatshot') {
        return '热门'
      }
    }
  },
  mounted () {
    console.log(this.avatarPrefix)
  },
  methods: {
    ...mapActions([
      'initHomeList',
      'toogleEX',
      'initWhatsHot',
      'logOut'
    ]),
    ...mapMutations([
      'TOOGLE_SEARCH',
      'TOOGLE_ADVANCESEARCH',
      'SET_SEARCHPARAMS',
      'SWITCH_SAFEMODE'
    ]),
    openDialog () {
      this.$refs.dialog.open()
    },
    jumpTo () {
      this.$refs.dialog.close()
      this.initHomeList(this.pageNo)
    },
    refreshList () {
      if (this.currentPath === 'homelist') {
        this.initHomeList(0)
      } else if (this.currentPath === 'whatshot') {
        this.initWhatsHot()
      }
    }
  }
}
</script>
<style scoped>
.v-scrollable {
  overflow: auto;
  height: calc(100% - 64px);
  -webkit-overflow-scrolling : touch;
}
.toggles {
  position: absolute;
  bottom: 0;
  width:100%
}
.toggles .toggle {
  margin-left: .4rem
}
button.log-out {
  width: 100%;
  min-height:56px;
  margin:0;
}
</style>
